<template>
  <div class="shopcar-container">
    <van-swipe-cell v-for="item in carList" :key="item.id" :right-width="40">
      <div class="shopcart-box">
        <van-checkbox
          class="checked"
          v-model="item.checked"
          checked-color="#F63515"
          @click="checkedCell"
        ></van-checkbox>
        <div class="cell" @click="pushdetal">
          <img :src="item.imageHost + item.mainImage" />
          <div class="shopcart-item-info">
            <p class="shopcart-name">{{item.name}}</p>
            <p class="shopcart-subtitle">{{item.subtitle}}</p>
            <div class="shopcart-stepper">
              <span class="shopcart-price">{{item.price}}</span>
              <van-stepper
                v-model="item.count"
                @plus="handPlus(item)"
                @minus="handMinus(item)"
                min="1"
                max="8"
              />
            </div>
          </div>
        </div>
      </div>
      <template slot="right">
        <van-button square type="danger" text="删除" @click="onClose(item)" style="width:40px" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  props: {
    carList: {
      type: Array,
    },
  },
  data() {
    return {
      checked: false,
      value: 1,
    };
  },
  created() {
    console.log(this.carList);
  },
  methods: {
    //删除
    onClose(item) {
      this.$emit("delCar", item);
    },
    //复选框按钮
    checkedCell() {
      this.$store.dispatch("changeChecked");
    },
    //跳转详情页
    pushdetal(e) {
      //事件处理过滤步进器事件
      if (e.target.className.indexOf("stepper") === -1) {
        console.log("跳转详情页面");
      }
    },
    //加数量
    handPlus(item) {
      this.$emit("refresh", { productId: item.productId, count: 1 });
    },
    //减
    handMinus(item) {
      this.$emit("refresh", { productId: item.productId, count: -1 });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../commin/style/mixin";
.shopcar-container {
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;
    .checked {
      width: 64px;
    }
    .cell {
      flex: 1;
      display: flex;
      justify-content: space-around;
      background: #fff;
      height: 200px;
      img {
        width: 180px;
        height: 180px;
        margin: 0 10px;
      }

      .shopcart-item-info {
        display: flex;
        flex: 70%;
        flex-direction: column;
        justify-content: space-between;

        .shopcart-name {
          height: 70px;
          font-size: 26px;
          overflow: hidden;
        }

        .shopcart-subtitle {
          font-size: 24px;
          color: #999;
        }

        .shopcart-stepper {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .shopcart-price {
            font-size: 30px;
            color: $red;
          }
        }
      }
    }
  }
  .van-button {
    height: 200px;
  }
}
</style>